<template>
    <div>
        <div class="navbox">
            <div>
                <span :class="{ textcolor: typeshow }" @click="change1">电子书</span>
                <span :class="{ textcolor: !typeshow }" @click="change2">有声书</span>

                <div :class="{ dingwei: !typeshow}"></div>
            </div>
        </div>
        <div class="mainbox">
            <div class="booktype">
                <div :class="{ yin: !typeshow, xian: typeshow }">
                    <TypeView :alltype="dzalltype" :typelist="dztypelist" :typeshow="typeshow"></TypeView>
                </div>
                <div :class="{ yin: typeshow, xian: !typeshow }">
                    <TypeView :alltype="ysalltype" :typelist="ystypelist" :typeshow="typeshow"></TypeView>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import TypeView from "@/components/mycomponents_jk/TypeView.vue"
export default {

    name: 'ClassIfication',
    components: {
        TypeView
    },
    data() {
        return {
            typeshow: true,
            dwdh: false,
            // 跳转至书籍列表  需要填写路由
            dzalltype: [
                {
                    type: "漫画杂志",
                    url:'',//书籍列表路由
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                },
                {
                    type: "外国文学",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1639.png"
                },
                {
                    type: "人物传记",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1640.png"
                },
                {
                    type: "推理小说",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1641.png"
                },
                {
                    type: "哲学宗教",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1643.png"
                },
                {
                    type: "英文原版",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                },
                {
                    type: "名著经典",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                },
                {
                    type: "历史文化",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                },
                {
                    type: "互联网+",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                },
                {
                    type: "职场提升",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                },
                {
                    type: "成功励志",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                },
                {
                    type: "心理课堂",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                }, {
                    type: "漫画杂志",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                },
                {
                    type: "外国文学",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1639.png"
                },
                {
                    type: "人物传记",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1640.png"
                },
                {
                    type: "推理小说",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1641.png"
                },
                {
                    type: "哲学宗教",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1643.png"
                },
                {
                    type: "英文原版",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                },
                {
                    type: "名著经典",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                },
                {
                    type: "历史文化",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                },
                {
                    type: "互联网+",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                },
                {
                    type: "职场提升",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                },
                {
                    type: "成功励志",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                },
                {
                    type: "心理课堂",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                }
            ],
            // 跳转至书籍详情  需要填写路由
            dztypelist: [
                {
                    title: "人气榜",
                    choose: false,
                    books: [
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "01",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1641.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "02",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1643.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "03",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "04",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "05",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "06",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "07",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "08",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "09",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                        }, {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "10",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                        }
                    ]
                },
                {
                    title: "好评榜",
                    choose: false,
                    books: [
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "01",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "02",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "03",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "04",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "05",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                        }, {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "16",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "07",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1641.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "08",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1643.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "09",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "10",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                        }
                    ]
                },
                {
                    title: "新书榜",
                    choose: false,
                    books: [
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "01",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "02",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "03",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "04",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "05",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "06",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "07",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "08",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "09",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                        }, {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "10",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                        }

                    ]
                },
                {
                    title: "热搜榜",
                    choose: false,
                    books: [
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "01",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1641.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "02",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1643.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "03",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "04",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "05",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "06",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "07",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "08",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "09",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                        }, {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "10",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                        }

                    ]
                },
                {
                    title: "会员榜",
                    choose: false,
                    books: [
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "01",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                        }, {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "02",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "03",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "04",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "05",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "06",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                        }, {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "07",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "08",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "09",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "10",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                        },
                    ]
                },
                {
                    title: "飙升榜",
                    choose: false,
                    books: [
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "01",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1641.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "02",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1643.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "03",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "04",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                        },

                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "05",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                        },
                        {
                            type: "古言小说",
                            name: "掌控",
                            wanjie: "加载中",
                            number: "06",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                        },
                        {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "07",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "08",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                        },
                        {
                            type: "古言小说",
                            name: "生之静物",
                            wanjie: "完结",
                            number: "09",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                        }, {
                            type: "仙侠小说",
                            name: "剑来",
                            wanjie: "完结",
                            number: "10",
                            img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                        }
                    ]
                },

            ],
            // 跳转至书籍列表  需要填写路由
            ysalltype: [
                {
                    type: "都市",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                },
                {
                    type: "玄幻",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1639.png"
                },
                {
                    type: "仙侠",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1640.png"
                },
                {
                    type: "科幻",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1641.png"
                },
                {
                    type: "历史",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1643.png"
                },
                {
                    type: "游戏",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                },
                {
                    type: "武侠",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                },
                {
                    type: "悬疑",
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                }
            ],
            // 跳转至书籍详情  需要填写路由
            ystypelist: [{

                title: "人气榜",
                choose: false,
                books: [
                    {
                        type: "古言小说",
                        name: "生之静物",
                        wanjie: "完结",
                        number: "01",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1641.png"
                    },
                    {
                        type: "古言小说",
                        name: "掌控",
                        wanjie: "加载中",
                        number: "02",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1643.png"
                    },
                    {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "03",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                    },
                    {
                        type: "古言小说",
                        name: "生之静物",
                        wanjie: "完结",
                        number: "04",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                    },
                    {
                        type: "古言小说",
                        name: "掌控",
                        wanjie: "加载中",
                        number: "05",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                    },
                    {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "06",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                    },
                    {
                        type: "古言小说",
                        name: "生之静物",
                        wanjie: "完结",
                        number: "07",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                    },
                    {
                        type: "古言小说",
                        name: "掌控",
                        wanjie: "加载中",
                        number: "08",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                    },
                    {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "09",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                    }, {
                        type: "古言小说",
                        name: "掌控",
                        wanjie: "加载中",
                        number: "10",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                    }
                ]
            },
            {
                title: "好评榜",
                choose: false,
                books: [
                    {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "01",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                    },
                    {
                        type: "古言小说",
                        name: "掌控",
                        wanjie: "加载中",
                        number: "02",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                    },
                    {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "03",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                    },
                    {
                        type: "古言小说",
                        name: "掌控",
                        wanjie: "加载中",
                        number: "04",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                    },
                    {
                        type: "古言小说",
                        name: "生之静物",
                        wanjie: "完结",
                        number: "05",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                    }, {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "16",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                    },
                    {
                        type: "古言小说",
                        name: "生之静物",
                        wanjie: "完结",
                        number: "07",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1641.png"
                    },
                    {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "08",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1643.png"
                    },
                    {
                        type: "古言小说",
                        name: "掌控",
                        wanjie: "加载中",
                        number: "09",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                    },
                    {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "10",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                    }
                ]
            },
            {
                title: "新书榜",
                choose: false,
                books: [
                    {
                        type: "古言小说",
                        name: "掌控",
                        wanjie: "加载中",
                        number: "01",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                    },
                    {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "02",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                    },
                    {
                        type: "古言小说",
                        name: "生之静物",
                        wanjie: "完结",
                        number: "03",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1644.png"
                    },
                    {
                        type: "古言小说",
                        name: "生之静物",
                        wanjie: "完结",
                        number: "04",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1645.png"
                    },
                    {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "05",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1646.png"
                    },
                    {
                        type: "古言小说",
                        name: "掌控",
                        wanjie: "加载中",
                        number: "06",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1647.png"
                    },
                    {
                        type: "古言小说",
                        name: "生之静物",
                        wanjie: "完结",
                        number: "07",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1648.png"
                    },
                    {
                        type: "仙侠小说",
                        name: "剑来",
                        wanjie: "完结",
                        number: "08",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1649.png"
                    },
                    {
                        type: "古言小说",
                        name: "生之静物",
                        wanjie: "完结",
                        number: "09",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1642.png"
                    }, {
                        type: "古言小说",
                        name: "掌控",
                        wanjie: "加载中",
                        number: "10",
                        img: "https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png"
                    }

                ]
            },
            ]
        };
    },

    mounted() {

    },

    methods: {
        // 切换页面 切换颜色 控制动画
        change1() {
            this.typeshow = true;
      
        },
        change2() {
            this.typeshow = false;
        }
    },
};
</script>

<style lang="less" scoped>
.navbox {
    color: #999999;
    font-size: 1.6rem;
    line-height: 3rem;
    height: 5rem;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    padding: 1rem 2rem;
    z-index: 9999;

    >div {
        position: relative;

        span {
            display: inline-block;
            width: 8rem;
            text-align: left;
        }

        div {
            width: 2.6rem;
            height: 0.6rem;
            border-radius: 0.3rem;
            background-color: #28d094;
            position: absolute;
            left: 0;
            top: 3.2rem;
            transition: all 0.2s linear;
        }

        .textcolor {
            color: #28d094;
            font-weight: bold;
        }

        .dingwei {
            left: 8rem;

        }

       
    }

}

.mainbox {
    width: 100%;
    padding: 4rem 0 1rem;

    .booktype {
        width: 100%;
        // height: 50rem;
        margin-top: 2rem;
        overflow: hidden;

        >div {
            float: left;
            height: 100%;
            transition: all .2s linear;
            overflow: hidden;
        }

        .yin {
            width: 0;
            height: 0;
        }

        .xian {
            width: 100%;
            height: 100%;
        }
    }
}
</style>